<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <script src="./../requriejs/bower_components/requirejs/require.js"></script>
    <script>
        requirejs.config({
            paths: {
                'jquery': './../lib/jquery-1.11.0',
                'ko':'./bower_components/knockout/dist/knockout'
            }
        });
    </script>
</head>
<body>
    <style>
        .x-card-border{
            border: 1px solid #B0B1B3;
        }
        .x-border_radius{
            border-radius: 5px;
        }

        .x-attachment{
            min-height:60px;
            margin-bottom:10px;
        }
        .x-attachment-header{
            text-align:left;
        }
        .x-attachment-header .x-upload-state{
            display: block;
        }

        .x-attachment-header .x-attachment-text{
            display: block;
            float: left;
            color: #778C99;
        }

        .x-attachment-header .x-remove-state{
            display: none;
        }

        .x-remove-barget{
            background-position-y: -14px;
            background: url(./ico_all.png) no-repeat;
            display: block;
            width: 25px;
            height: 25px;
            /* position: relative; */
            /* top: 0px; */
            /* right: 0px; */
            background-position-x: -568px;

        }

        .x-attachment-content{
            display:block;
            width:100%;
            border-top: 1px solid #B7B7B7;
            padding-bottom:1px;
            background: #FFF;
            min-height: 52px;
        }

        .x-attachment-item{
            float:left;
            position: relative;
            margin-left: 6px;
            margin-bottom: 4px;
            width:40px;
            height: 40px;
        }
        .x-item-upload{
            background-size: 40px;
            background-image: url();
        }
        .x-item-remove{
            background-size: 40px;
            background-image: url();
        }
        .x-item-person{
            background-size: 40px;
            background-image: url();
        }
        .x-attachment-cell{
            margin-top: 5px;
        }
    </style>
    <div id="uploader" style="" class="x-attachment">
        <div  class="x-attachment-header">
            <span class="x-attachment-text" data-bind="visible:state() == 'upload'">附件上传</span>
            <span class="x-attachment-text" data-bind="visible:state() == 'remove'">附件删除</span>
            <div style="clear:both;"></div>
        </div>

        <div class="x-attachment-content x-card-border x-border_radius">
            <div class="x-attachment-cell" data-bind="visible:state() == 'upload' && (limit() == '-1' || limit() > attachmentItems().length)">
                <div class="x-attachment-item x-item-upload">
                </div>
            </div>

            <div class="x-attachment-cell" data-bind="visible:state() == 'upload'">
                <div class="x-attachment-item x-item-remove" data-bind="click:changeState.bind($data,'remove')">
                </div>
            </div>
            <!-- ko foreach: attachmentItems -->
                <div class="x-attachment-cell">
                    <div class="x-attachment-item x-item-person" data-bind="click:$root.previewOrRemoveItem">
                         <a data-bind="visible:$root.state() == 'remove'" class="x-remove-barget"></a>
                    </div>
                </div>
            <!-- /ko -->
            <div style="clear:both;"></div>
        </div>
    </div>
    <span data-bind="text:test().key">oldvalue</span>
    <span data-bind="text:test2().key().nativeKey()">oldvalue</span>
    <script>
        require(["./uploader",'ko'],function(Uploader,ko){
            /*new Uploader('#rootElement',{
                actionUrl:'http://mindsaur.com/demo/fileupload/src/php/getfile.php'
            });*/

            var initialData = {
                'state':'upload',
                attachmentValue:[
                    {fileName:'file1.mp3',fileSize:'5000',docID:"123"},
                    {fileName:'file1.mp3',fileSize:'5000',docID:"123"},
                    {fileName:'file1.mov',fileSize:'5000',docID:"123"},
                    {fileName:'file1.zip',fileSize:'5000',docID:"123"}
                ],
                limit:-1
            };
            var attachmentViewModel = function(initValue){
                var self = this;
                self.limit = ko.observable(initValue.limit);
                self.state = ko.observable(initValue.state);
                self.attachmentItems = ko.observableArray(initValue.attachmentValue);
                self.test = ko.observable({
                    key:ko.observable(10)
                });

                /**
                 * controller
                 **/
                self.init = function(){
                    self.uploader = new Uploader(document.querySelector('.x-item-upload'),{
                        actionUrl:'http://mindsaur.com/demo/fileupload/src/php/getfile.php'
                    });
                };
                self.init();

                self.changeState = function(state){
                    console.log('state:' +state)
                    self.state(state);
                };
                self.previewOrRemoveItem = function(){
                    if(self.state() == 'upload'){
                        alert('preview docID:' + this.docID);

                    }else if(self.state() == 'remove'){
                        self.attachmentItems.remove(this);
                    }

                }
                /*
                 *  excloud
                 */
                document.querySelector('body').addEventListener('click',function(event){
                    if(event.target.classList.contains('x-remove-barget') == false &&  event.target.classList.contains('x-attachment-item') == false){
                        self.changeState('upload');
                    }
                },false);
            };
            ko.applyBindings(new attachmentViewModel(initialData));
        });
    </script>
</body>
</html>